import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

const List = () => {
  const list = useSelector((state) => state.todolist.list);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({ type: "loadItemAction" });
    // eslint-disable-next-line
  }, []);

  return (
    <ul>
      {list.map((item) => (
        <li key={item._id}>
          {item.title} -{" "}
          <button
            onClick={() => dispatch({ type: "removeItemAction", id: item._id })}
          >
            删除
          </button>
        </li>
      ))}
    </ul>
  );
};

export default List;

// import React from "react";
// // react-redux给我们新增了两个hooks
// // useSelector是用来获取仓库的数据的
// // useDispatch是用来获取仓库的方法的
// import { useSelector, useDispatch } from "react-redux";

// const List = () => {
//   const list = useSelector((state) => state.list);
//   const dispatch = useDispatch();

//   return (
//     <ul>
//       {list.map((item) => (
//         <li key={item.id}>
//           {item.name} -{" "}
//           <button onClick={() => dispatch({ type: "removeItem", id: item.id })}>
//             删除
//           </button>
//         </li>
//       ))}
//     </ul>
//   );
// };

// export default List;
